<template>
  <el-dialog :title="{add:'添加角色',bj:'编辑角色'}[mode]" :visible.sync="show" @close="quxiao">

    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input v-model="form.description" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="text-align: center;">
        <el-button @click="quxiao"> 取消</el-button>
        <el-button type="primary" @click="quer">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { sysroleadd, bjsysrole } from '@/api/gonshi'
export default {

  data() {
    return {
      show: false,
      mode: 'add',
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '内容', trigger: 'change' },
          { min: 2, max: 10, message: '2-10', trigger: 'change' }
        ],
        description: [
          { required: true, message: '内容', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    async quer() {
      if (this.mode === 'add') {
        await this.$refs.form.validate()
        await sysroleadd(this.form)
        this.$message.success('添加成功')
        this.$emit('getadd')
        this.show = false
      } else {
        await this.$refs.form.validate()
        await bjsysrole(this.form)
        console.log(this.form.id)

        this.$message.success('修改成功')
        this.$emit('getadd')
        this.show = false
      }
    },
    quxiao() {
      this.show = false
      this.$refs.form.resetFields()
      this.form = {
        name: '',
        description: ''
      }
    }
  }

}
</script>

<style>

</style>
